<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>

<link rel="stylesheet" href="../lib/layui/css/layui.css" type="text/css" />
<script src="../lib/layui/layui.js"></script>
<script src="../js/jquery/jquery-1.8.2.js"></script>
<title>在此插入标题</title>
</head>
<body>

	<form class="layui-form" style="width: 300px">
		<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block">
				<input type="text" name="name" placeholder="姓名"
					autocomplete="off" class="layui-input" id="name">   
			</div>
		</div>
				
		
		<div class="layui-form-item">
			<label class="layui-form-label">类别</label>
			<div class="layui-input-block">
				<input type="text" name="nicheng" placeholder="请输入类别"
					autocomplete="off" class="layui-input" id="name">   
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-block">
				<input type="text" name="phone" placeholder="请输入电话"
					autocomplete="off" class="layui-input" id="money">
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">档案</label>
			<div class="layui-input-block">
				<input type="text" name="dangAn" placeholder="请输入档案"
					autocomplete="off" class="layui-input" id="name">   
			</div>
		</div>
		



		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>



	<script>
		layui
				.use(
						[ 'form', 'table', 'upload', 'layer', 'element' ],
						function() {

							var form = layui.form;
							var upload = layui.upload;
							var layer = layui.layer;
							var element = layui.element;
							var table = layui.table;
							var $ = layui.$;

							//编辑
							function getQueryString(name) {
								var reg = new RegExp("(^|&)" + name
										+ "=([^&]*)(&|$)", "i");
								var url = decodeURI(decodeURI(window.location.search))
								var r = url.substr(1).match(reg);
								if (r != null)
									return unescape(r[2]);
								return null;  
							}
							$(document).ready(function() {
								var name = getQueryString("name");
								var nicheng = getQueryString("nicheng");
								var phone = getQueryString("phone");
								var dangAn = getQueryString("dangAn");

								//方法一 :query赋值
   
								$("#name").val(name);
								$("#nicheng").val(nicheng);//todo....
								$("#phone").val(phone);
								$("#dangAn").val(dangAn);

							});  

							//提交按钮
							form.on('submit(sub)', function(data) {
								console.log(data.field) //被执行事件的元素DOM对象，一般为button对象
								data.field.img = $("#img").html();
								var id = getQueryString("id");
								data.field.id = id;
								$.ajax({
									url : "../GuWenbServlet",//数据接口
									type : "get",
									data : data.field,
									success : function(res) {
										alert(res.msg);
									}

								});
								return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
							});

							//各种基于事件的操作，下面会有进一步介绍

							//执行实例  
							//图片链接
							var uploadInst = upload.render({
								elem : '#test1' //绑定元素
								,
								url : '../HuiServlet' //上传接口
								,
								done : function(res) {
									//上传完毕回调
									console.log(res);
									if (res.code == 0) {

										$("#img").html(res.data);
									}
								},
								error : function() {
									//请求异常回调

									console.log(res);
								}
							});

							//动态下拉框
							$(function() {
								$
										.ajax({
											url : "../HuiServlet",
											type : "get",
											data : {},
											success : function(res) {
												var $select = $("#yishuid");
												for (var i = 0; i < res.data.length; i++) {
													$select
															.append("<option value='"+res.data[i].id+"'>"
																	+ res.data[i].name
																	+ "</option>");
												}
												form.render();

											},
											dataType : "json"

										});

							});

						});
	</script>
</body>
</html>